<template>
    <div class="datasource-wrapper">
        <div class="datasource-switcher-wrapper">
            <div class="datasource-label">数据表</div>
            <!--          <b-select model-value="test_datasource" size="mini">-->
            <!--              <b-option value="test_datasource" label="探索空间"></b-option>-->
            <!--          </b-select>-->
        </div>
        <div class="datasource-table-search">
            <b-icon name="search" type="button"></b-icon>
            <input placeholder="搜索数据表/文件" type="text" v-model="keyword">
        </div>
        <b-row type="flex" justify="center" align="middle" >
            <b-col span="20">
                <b-tabs v-model="activeTab" :data="tabs"></b-tabs>
            </b-col>
            <b-col span="4">
                <b-icon v-if="activeTab==='files'" name="upload"  @click="toggle()" type="button"></b-icon>
            </b-col>
        </b-row>
        <div style="overflow:hidden;">
            <b-move-transition>
                <template v-if="activeTab==='model'">
                    <node-list
                            style="height: 100%"
                            :data="tableList"
                            :all-node-title="allNodeTitle"
                            :root-node="stateTree"
                            :loading="tableListLoading"
                            @start="handleDragStart"
                            @end="handleDragEnd"
                    ></node-list>
                </template>
                <p v-else-if="activeTab==='files'">
                    <node-list
                            style="height: 100%"
                            :data="tableList"
                            :all-node-title="allNodeTitle"
                            :root-node="stateTree"
                            :loading="tableListLoading"
                            @start="handleDragStart"
                            @end="handleDragEnd"
                    ></node-list>
                </p>
            </b-move-transition>
        </div>
    </div>
    <b-drawer v-model="isFiles" width="40%" title="上传文件" draggable>
        <b-upload action="http:////datav.mtgshenghuo.com/admin/model/readexcel"
                  multiple accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="drag">
            <div style="padding: 20px 0;border:1px dashed #eee;cursor: pointer;"
                 flex="dir:top main:center cross:center">
                <p>
                    <b-icon name="cloud-upload" size="52" style="color: #3399ff"></b-icon>
                </p>
                <p>请点击选择对应文件上传，csv或xlsx</p>
            </div>
        </b-upload>
    </b-drawer>
</template>

<script setup>
    import NodeList from '@/components/Service/LinkNode/node-list.vue'
    import {computed, inject, ref, watch} from 'vue'
    import { useToggle } from '@vueuse/core'
    const [isFiles, toggle] = useToggle()
    const BiCube = inject('BiCube', {})
    const allNodeTitle = computed(() => BiCube.schemaStatus.flatState.value.map(v => v.node.title))
    const stateTree = computed(() => BiCube.schemaStatus.stateTree.value)
    const tableList = computed(() => BiCube.schemaStatus.tableList.value)
    const tableListLoading = computed(() => BiCube.schemaStatus.tableListLoading.value)
    const keyword = ref('')

    const tabs = ref([
        {key: 'model', title: '数据源'},
        {key: 'files', title: '文件'}
    ])
    const activeTab = ref('model')

    const handleDragStart = () => {
        BiCube.schemaStatus.dragging.value = true
    }
    const handleDragEnd = () => {
        BiCube.schemaStatus.dragging.value = false
    }
    watch(() => keyword.value, (val) => {
    })
</script>

<style scoped lang="scss">
  @import "../../../assets/stylus/base/var.scss";

  .datasource-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #fafafa;
    padding-bottom: 10px;
    padding-top: 20px;

    .datasource-switcher-wrapper {
      position: relative;
      padding: 0 10px;

      .datasource-label {
        margin-bottom: 10px;
        opacity: .45;
      }

    }

    .datasource-table-search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      margin: 0 10px;

      > input {
        background-color: #fafafa;
        border: none;
        width: 185px;
        outline: none;
        height: 32px;
        padding: 4px 0 4px 5px;
        color: #262626;
        font-size: 12px;
        line-height: 32px;
      }
    }

    .datasource-content-list {
      color: #313132;
      padding: 5px;
      flex: 1 1 auto;
      overflow-y: auto;
      height: 0;
    }
  }
</style>
